Aloha and welcome to Designer’s Studio, the most outrageous appearance manager ever created for the MacOS. Along with Designer’s Studio and the Kaleidoscope Control Panel you are about to take absolute control over every visible aspect of your operating system (some aspects of OS8 are not supported at this time). Please follow the instructions below to learn everything you need to know about how to use Designer’s Studio to create the interface of your dreams, change it a million times, and create it again, easily!
Your operating system provides all applications with a set of resources with which to create their windows and dialog boxes, and all of the buttons, scroll bars, progress bars, icons etc. that appear on and in them. When you install the Kaleidoscope Control Panel you enhance your system with the ability to use a wide variety of appearances known as Color Schemes. Color schemes are small files containing a set of resources which are used to create the windows and dialog boxes instead of the standard set that come with the operating system. Designer’s Studio gives you the power to alter these resources instantly in any way you would like.
This document will introduce you to the Designer’s Studio interface and the art of color scheme designing. This document does not teach you about the many subtleties of designing a color scheme. We strongly recommend that you use the Kaleidoscope Scheme Guide that comes with the Designer’s Studio Package for a detailed understanding of how each resource in a color scheme is used by the Kaleidoscope control panel to create the appearance of your interface.
The Designer’s Studio interface is set up intuitively, with every function available by a single click of your mouse. By reading this document and following along and exploring the different parts of the interface as they are presented, you will be well on your way to creating color schemes.
As you double click on the Designer’s Studio icon you will get a dialog box asking you whether you want to open or create a new color scheme. If this is the first time you have done this we recommend that you open a scheme that you are familiar with. If you select New a color scheme will be created for you.
As the main interface opens you will find two windows. The one on the left is called the Previewer and the one on the right is the Editor. Around these windows are several buttons and popup menus, etc. We’ll look at them beginning in the upper left corner and moving clockwise around the interface. Note that you may also activate the Tool Tips from the Window menu.
In the upper left corner, you’ll find a standard set of desktop functions including New, Open, Save, Cut, Copy, Paste, Undo and Redo. You have as many undos and redos as you wish. By default this is set in the preferences at 40. You may change this setting in the Preferences in the File menu.
To the right of these “desktop functions” buttons you will find an icon that looks like a pencil over a radio button. This is actually a toggle button that changes the way the preview window works. Normally, when you click on a button or scroll arrow in the preview window, the resource which you need to edit to change this part of the scheme is displayed in the editor to the right. When you click this toggle it puts the preview into what we call action mode. When you click on a button in action mode it actually pushes. All those things that change in the “real” world can be changed in action mode. This gives you access to the pressed version of the button. The same thing is true with all the window widgets, scroll bars, scroll arrows, etc. Once you get the view that you want to work on set up go back to this toggle and change it back to its normal position and you can continue work.
The two popup menus to the right of the toggle are for selecting the view that you want to appear in the Previewer below. With the popup on the left you may select several views including, Document Windows, Dialog Boxes, Alert Boxes, Menu Bar, Utility Windows, and others. After you have selected from among these basic previews you may further define the preview by selecting from the choices in the popup menu to the right. Among these you may select active or inactive previews as well as special previews that are appropriate for the type of preview shown in the left popup.
You will note that there is a preview called KSA. This stands for the Kaleidoscope Scheme Archive. This preview is the exact sample shot that the KSA presents on their web site of each color scheme in the archive.
To the right of the previews list is a magnifying glass. Clicking on this will open the Magnifying Glass. This window is set to track your cursor. You may zoom the view in the window from 100% to 1600%. You may change the percentage of zoom either by increments, by clicking on the plus or minus signs, or directly by clicking on the triangle below the readout and while holding down your mouse sliding the triangle to the left or right. You may also click on any point along the triangles path and it will jump to that place instantly.
Clicking on the blue triangle in the lower left corner of the Magnifying Glass will expand the bottom of the Magnifying Glass frame to include a readout that gives you both the position of your mouse and the color value of the pixel directly under it. The color value can be expressed in the large and small versions of RGB as well as in HEX. By default this is set to the smaller, 255 RGB standard. Use the Preferences command in the File menu to change these settings to your liking. You may turn on, in the Window menu, a cross hair that will appear in the center of the magnifying glass to indicate the exact position of your mouse.
With the two popup menus to the right of the magnifying glass you can select any resource that is a part of the color scheme and it will appear in the editor below. With the upper popup you select the type of resource, and the lower popup the specific resource in that type. If you select a resource that is not a part of your color scheme a notice to this effect will appear in the Editor window. You may add any resource that is not a part of your color scheme at this time by selecting the Add Resource button which is below the Editor window (explained below).
Below this is the Editor window itself. The layout of this window changes based upon which type of resource is being displayed. For graphical types of resources the top half of this window automatically displays a resource zoomed in to fill the window. The bottom half displays the family that this resource belongs to. You may bring any member of the family into the editable view above by simply clicking on the member of your choice. You may drag and drop any family member by clicking on it and while holding down your mouse dragging it to where you want. This can be another member of the same family or a different color scheme that is open at the same time.
The common way to bring a resource up into the Editor window is to first select the view you want to appear in the Previewer and then click on the part of the view that you want to edit. As you do this you will notice that the resource that is used to create that part of the view will appear in the editor. Most the resources that will appear are graphical and they are edited in the same way as a drawing or painting program works. To see this in action click on an arrow or a button in the preview and you will see the resource that creates it appear in the editor. Now, selecting from the tools palette, to the far left, one of the drawing tools (introduced below) you can begin to color the resource in the editor. You will note that as soon as you are done with an action and have let up on your mouse the view in the the Previewer will change to reflect what you did to the resource in the Editor.
There are also editors for the none graphical types of resources used in a color scheme. To see these in actions bring up a view of a Dialog or an Alert and click on the field of the view in the Previewer. This will bring up a color table. The way you fill a color chip in these tables is to click once on a chip. As soon as you have done this you will note that the color in this chip will change to whatever the color is of the pixel your mouse is over. When next you click your mouse the color chip will be set to whatever the color is of the pixel your cursor was over when you clicked your mouse.
There are also editors to set the vers, STR, and Colr resources. These are texted based and you use the fields presented in each to type in the appropriate information.
Designer’s Studio has a second “Floating Editor” (which you launch from the Window menu) that allows you to work on all the graphical resources that you see in the main Editor. This window is resizable and the view in it can be zoomed up to 1600% for closeup detailed editing of a resource. This window is recommended for all editing of the larger resources.
Both editors have a grid that is able to be turned on or off. This is done by selecting it in the Window menu or the Preferences.
At the very bottom right hand corner of the interface are two groups of buttons. The group to the right includes, Add Resources, Revert Resource, and Delete Resource. The Add Resource button is used to add a resource that is not already a part of your color scheme. The resource that is added is from the default color scheme that is built into Designer’s Studio. All the optional resources are available. The Revert Resource button is used to revert a resource to the last saved version.
With the set of four buttons to the left you can alter the Brightness, Hue, and Saturation of your color scheme. These functions may be applied to a single resource or the entire color scheme. Use the popup button to the right to select whether the you will have ‘universal’ (complete scheme) or ‘local’ (only the resource or selected part thereof in the editor at the time) effect. When pushed, and while continuing to hold down your mouse, any of the three buttons on the left will reveal a sliding bar. While continuing to hold down your mouse you can adjust the color scheme or the resource you have selected in a myriad of ways.
Please note: The changes that you make to your color scheme with any of these controls when they are set to effect the entire scheme can not be undone. Please Save your color scheme BEFORE you make any changes with these controls so that you may Revert to the last Saved version in the event you are not happy with the results.
With the Brightness control you can lighten or darken your scheme. By continuing to hold down your mouse and moving all the way to the left of the scale you will have changed the selected area to white. By doing the same all the way to the right you will change it to black.
The Hue control allows you to change all the colors in the selected resource(s). You will notice that as this scale opens your cursor is in the center of the scale over the color cyan. If you take a cyan resource and shift its hue using this tool you will note that the color shift will be the same as the color shift along the scale. When shifting other colors you will not see the same direct relationship but your the hue of your color scheme will cycle through the color palette proportionally.
The Saturation control effects only colors not black and white or shades of gray. When you slide to the left you are saturating the colors, and to the right de-saturating them.
Below the Previewer window is the color palette. The 256 color palette that appears when you first open Designer’s Studio is designed to give you quick reference to all the colors in the palette and their relationship to one another.
The camera in the bottom left hand corner is for taking screen shots of the Previewer window. You can either save these as PICT files or to your clipboard for further pasting into other applications. You can select between these two in the Preferences.
Above the camera are the foreground and background color chips. These can be switched fore to back and visa verse, by clicking on one or the other. The color chip that is in the foreground is the color that will be applied when working on a resource with any of the drawing tools explained below. There are several ways to set the color of the color chips. The standard is to click on a color in the palette to the right and that will set the foreground color to whatever color you selected. To set the background color bring the background color chip to the front and then set its color and return it to the background position. To select from a wider variety of colors you may bring up your system palette by doing a control click on the foreground color chip. You may also set the color of the foreground chip by holding down the option key which will temporary change your cursor to the eyedropper which you can use to select any color from the resource in either editor.
Next up is the pattern picker. With this you can choose from a wide variety of patterns that you then may apply with the various line and drawing tools above. The pattern colors are determined by the colors you have selected as your foreground and background colors as discussed above.
Above the pattern picker is a popup menu to select from the seven palettes that come with Designer’s Studio. These are designed to be compatible for the different bit depths that are supported. The is both the standard and our custom arrangement of the Macintosh 256 color palette.
Above this is the popup menu to select which accent color (when the scheme being worked on has them) you want to see in the previewer. If the color scheme you are working on does not have accents this is a button. Clicking on this button will lead you through the steps of adding a complete set of accent colors to your color scheme.
Above the accent colors button/popup menu is a set of flip and rotate buttons. With these you can instantly flip a resource in the editor either horizontally or vertically or rotate it 90 degrees to the left or right.
Above these is the tool palette. Here you select from the wide variety of tools that you can use to paint the resources. There are fourteen tools altogether; three Selection Tools, nine Drawing Tools, an Erasure, and the Eyedropper. Of the drawing tools the Line, Rectangle, Rounded Rectangle, and Oval tools are in the lower right hand corner. To select from among these click on this button and move your cursor to the right to choose from the selection presented.
As soon as you have created your first color scheme we encourage you to share it with the world. We strongly recommend that for the greatest exposure you list your schemes with the Kaleidoscope Scheme Directory (KSD) which can be found at:
http://www.akamaidesign.com/kaleidoscope/ksd.html
We also recommend that you add a copy of your color scheme to the Kaleidoscope Scheme Archive (KSA) at:
